<template>
  <div class="social_medical">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="详细数据" name="detail">
        <div class="bar">
          <el-form :inline="true">

            <el-form-item label="月份">
              <el-date-picker size="small"
                  v-model="form.archivesDate"
                  type="month"
                  @change="getDataList"
                  placeholder="选择月"
                              :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.cid" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList" size="small" type="primary">筛选</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="content">
          <el-table
              :data="tableData"
              border
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="证件号码" prop="cid" width="180"></el-table-column>
            <el-table-column label="养老保险">
              <el-table-column label="个人" prop="paymentAmountOfElderlyCarePersonal"></el-table-column>
              <el-table-column label="单位" prop="paymentAmountOfElderlyCareUnits"></el-table-column>
            </el-table-column>
            <el-table-column label="失业">
              <el-table-column label="个人" prop="paymentAmountOfUnemploymentPersonal"></el-table-column>
              <el-table-column label="单位" prop="paymentAmountOfUnemployment"></el-table-column>
            </el-table-column>
            <el-table-column label="工伤">
              <el-table-column label="个人" prop=""></el-table-column>
              <el-table-column label="单位" prop="paymentAmountOfIndustrialInjuryUnits"></el-table-column>
            </el-table-column>
            <el-table-column label="基本医疗">
              <el-table-column label="个人" prop="paymentAmountOfBasicMedicalPersonal"></el-table-column>
              <el-table-column label="单位" prop="paymentAmountOfBasicMedicalUnits"></el-table-column>
            </el-table-column>
            <el-table-column label="大额医疗">
              <el-table-column label="个人"></el-table-column>
              <el-table-column label="单位" prop="paymentAmountOfLargeAmountUnits"></el-table-column>
            </el-table-column>
            <el-table-column label="个人合计" prop="personalTotal">
              <template slot-scope="scope">
                {{ scope.row.personalTotal + scope.row.totalPersonalPayment }}
              </template>
            </el-table-column>
            <el-table-column label="单位合计" prop="socialTotal">
              <template slot-scope="scope">
                {{ (scope.row.unitTotal + scope.row.totalUnitPayment).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
                hide-on-single-page
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[12]"
                :page-size=size
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="汇总数据" name="dept">
        <div class="bar">
          <el-form :inline="true">
            <el-form-item label="月份">
              <el-date-picker
                  v-model="form.archivesDate"
                  type="month" size="small"
                  @change="getDataList"
                  placeholder="选择月"
                  :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="form.dept" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList" size="small" type="primary">筛选</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="tableData"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}">
          <el-table-column label="缴费月份" prop="archivesDate">
            <template slot-scope="scope">
              {{scope.row.archivesDate|formatDateBirth}}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="dept"></el-table-column>
          <el-table-column label="养老">
            <el-table-column label="个人" prop="paymentAmountOfElderlyCarePersonal"></el-table-column>
            <el-table-column label="单位" prop="paymentAmountOfElderlyCareUnits"></el-table-column>
          </el-table-column>
          <el-table-column label="大额医疗">
            <el-table-column label="个人" prop="paymentAmountOfLargeAmountPersonal"></el-table-column>
            <el-table-column label="单位" prop="paymentAmountOfLargeAmountUnits"></el-table-column>
          </el-table-column>
          <el-table-column label="医疗">
            <el-table-column label="个人" prop="paymentAmountOfBasicMedicalPersonal"></el-table-column>
            <el-table-column label="单位" prop="paymentAmountOfBasicMedicalUnits"></el-table-column>
          </el-table-column>
          <el-table-column label="失业">
            <el-table-column label="个人" prop="paymentAmountOfUnemploymentPersonal"></el-table-column>
            <el-table-column label="单位" prop="paymentAmountOfUnemployment"></el-table-column>
          </el-table-column>
          <el-table-column label="工伤">
            <el-table-column label="单位" prop="paymentAmountOfIndustrialInjuryUnits"></el-table-column>
          </el-table-column>
          <el-table-column label="生育">
            <el-table-column label="单位0.5%"></el-table-column>
          </el-table-column>
          <el-table-column label="个人">
            <el-table-column label="对账明细"></el-table-column>

          </el-table-column>
          <el-table-column label="离职补差"></el-table-column>
          <el-table-column label="合计扣款"></el-table-column>
          <el-table-column label="单位">
            <el-table-column label="对账明细"></el-table-column>

          </el-table-column>
          <el-table-column label="合计扣款"></el-table-column>
          <el-table-column label="部门参保人员" prop="peopleNum"></el-table-column>
          <el-table-column label="费用占比"></el-table-column>

        </el-table>
        <div class="block">
          <el-pagination
              hide-on-single-page
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[12]"
              :page-size=size
              layout="total, sizes, prev, pager, next, jumper"
              :total=total>
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
export default {
  name: "SocialSecurityMedicalInsurance",
  data() {
    return {
      dialogVisible: false,
      list: [],
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      currentPage: 1,
      total: 0,
      size: 12,
      tableData: [],
      dialogVisibleUpload: false,
      form: {
        archivesDate: new Date()
      },
      activeName: "detail"
    }
  },
  created() {
    this.activeName = this.$store.state.socialMedicalActiveName || 'detail'
  },
  methods: {
    getDataList() {
      axios.post("/social_medical_view/list/" + this.activeName + "/page/" + this.currentPage + "/" + this.size, this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        } else {
          this.tableData = []
          this.total = 0
          this.pages = 1

        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.$store.commit("setSocialMedicalActiveName", tab.name)
      this.getDataList()
    }
  }
}
</script>

<style scoped>

</style>
